<template>
    <div>
        <div class="table-header">
            <a-button class="editable-add-btn" type="primary" @click="showAdd" style="margin-bottom: 8px">新增</a-button>
            <div class="filter">
                <a-input-search v-model:value="keyword" style="width:200px;" @search="search" />

            </div>
        </div>
        <a-table
            :dataSource="dataSource" 
            :row-key="record=>record.id" 
            :pagination="{total:totalSize,current:currentPage,pageSize:pageSize,showSizeChanger:true,showQuickJumper:true}"
            @change="changePage"
            >
            <a-table-column key="title" title="标题" data-index="title"></a-table-column>
            <a-table-column key="updatetime" title="更新时间" data-index="updatetime"></a-table-column>
            <a-table-column key="ctrls" title="操作" data-index="ctrls">
                <template #default="{ record }">
                    <a-button type="link" @click="edit(record.id)">编辑</a-button>
                    <a-divider type="vertical" />
                    <a-button type="link" danger @click="del(record.id)">删除</a-button>
                </template>
            </a-table-column>
        </a-table>

        <a-modal v-model:visible="editVisible" :title="formState.id?'编辑大事记':'新增大事记'" @ok="handleAdd" :width="800">
            <a-row>
                <a-col :span="4" class="label-name"><span class="red">*</span>标题</a-col>
                <a-col :span="20">
                    <a-input v-model:value="formState.title" />
                </a-col>
            </a-row>
            <div class="blank"></div>
            
            <a-row>
                <a-col :span="4" class="label-name">详情</a-col>
                <a-col :span="20">
                    <vue3-tinymce v-model="formState.content" :setting="edSetting" @change="changeContent" />
                </a-col>
            </a-row>
        </a-modal>
    </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs,createVNode } from 'vue';
import { SmileOutlined,QuestionCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue/lib';
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
import Http from '@/until/http';
import config from '@/until/configs';
import { messageTips } from '@/until/tools';



export default defineComponent({    
    components:{SmileOutlined,Vue3Tinymce,QuestionCircleOutlined},
    setup() {
        const state = reactive({
            dataSource:[],
            editVisible:false,
            keyword:'',
            selectList:[],
            familyName:config.familyName,
            totalSize:0,
            currentPage:1,
            pageSize:10
        });

        const edSetting = reactive({
            menubar: false,
            height: 400,
            toolbar:
            "bold italic underline h1 h2 blockquote codesample numlist bullist link image | removeformat fullscreen",
            plugins: "codesample link image table lists fullscreen",
            toolbar_mode: "sliding",
            nonbreaking_force_tab: true,
            link_title: false,
            default_link_target: "_blank",
            content_style: "body{font-size: 16px}",
            // 自定义 图片上传模式
            custom_images_upload: true,
            images_upload_url: "your_upload_api_url...",
            custom_images_upload_callback: (res) => res.url,
            custom_images_upload_param: { id: "xxxx01", age: 18 }
        })

        const formState=reactive({
            id:null,
            title:'',
            content:''
        })

        const showAdd = ()=>{
            Object.assign(state,{
                editVisible:true
            })
        }


        const handleAdd = ()=>{
            if(formState.name==='') {
                messageTips('请填标题',2);
                return false;
            }
            if(formState.content==='') {
                messageTips('请输入详情',2);
                return false;
            }
            let params = {
                title:formState.title,
                content:formState.content
            }
            let funcName = 'addInstantbook';
            if(formState.id) {
                params.id = formState.id;
                funcName = 'editInstantbook';
            }
            Http[funcName](params).then(res=>{
                if(res) {
                    if(res.success) {
                        messageTips(res.message,3);
                        Object.assign(formState,{
                            id:null,
                            title:'',
                            memberId:null,
                            content:''
                        })
                        Object.assign(state,{
                            editVisible:false
                        })
                        if(params.id) {
                            getList({page:state.currentPage,pageSize:state.pageSize,title:state.keyword});   
                        } else {
                            state.currentPage = 1;
                            getList({page:state.currentPage,pageSize:state.pageSize});
                        }
                    } else {
                        messageTips(res.message,1);
                    }
                }
            })
        }

        const edit = (id)=>{
            Object.assign(state,{
                editVisible:true
            })
            Http.getInstantbookDetail({id}).then(res=>{
                if(res.article) {
                    Object.assign(formState,{
                        id:id,
                        title:res.article.title,
                        content:res.article.content
                    });
                }
            })
        }

        const del = (id)=>{
            Modal.confirm({
                title:'提示',
                icon: createVNode(QuestionCircleOutlined),
                content:'您确定要删除吗？',
                centered:true,
                okText:'确定',
                cancelText:'取消',
                onOk(){
                    Http.delInstantbook({id:id}).then(res=>{
                        if(res) {
                            if(res.success) {
                                messageTips(res.message,3);
                                getList({page:state.currentPage,pageSize:state.pageSize,title:state.keyword});
                            }
                        }
                    })
                }
            })
            
        }


        const changeContent = ()=>{}

        const search=()=>{
            let params = {}
            if(state.keyword) {
                params.title = state.keyword;
            }
            getList(params);
        }

        const changePage = (e)=>{
            let params = {
                page:e.current,
                pageSize:e.pageSize,
            }
            if(state.keyword) {
                params.title = state.keyword;
            }
            getList(params);
        }

        const getList=(params)=>{
            Http.getInstantbook(params).then(res=>{
                if(res.list) {
                    Object.assign(state,{
                        dataSource:res.list,
                        totalSize:res.count,
                    })
                    if(params.page) {
                        Object.assign(state,{                                
                            currentPage:params.page,
                        })
                    }
                    if(params.pageSize) {
                        Object.assign(state,{                                
                            pageSize:params.pageSize,
                        });
                    }
                }
            })
        }

        onMounted(()=>{
            getList({});
        })

        return {
            ...toRefs(state),
            formState,
            showAdd,
            handleAdd,
            edit,
            del,
            changeContent,
            edSetting,
            changePage,
            search
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/scss/famous.scss';
</style>